<template>
    <div class="examine-container">
      <el-card shadow="never">
        <div class="examine-header">
          <el-form :inline="true">
            <el-form-item>
              <span class="title-label">日报</span>
              <el-input
                  v-model="comment"
                  placeholder="搜索"
                  style="width: 220px"
                  clearable
              ></el-input>
            </el-form-item>
        
  
            <el-form-item style="margin-left: 25px">
              <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
              >搜索
              </el-button>

              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
                重置
              </el-button>
            </el-form-item>
          </el-form>
  
        </div>
  
        <div class="examine-body">

          <el-table
              :data="dailyList"
              :header-cell-style="{ background: '#f8f8f9', color: '#606266' }"
              ref="table"
              row-key="taskdaily_id"
              style="width: 100%"
              size="big"
          >
            <el-table-column prop="taskDailyId" label="日报ID" width="100" align="center">
            </el-table-column>
            <el-table-column prop="comment" label="日报内容" align="center">
            </el-table-column>
            <el-table-column prop="dailyStatus" label="日报状态" align="center">
            </el-table-column>
        
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
              <el-button 
                @click="handleUpdate(scope.row)"
                type="text" 
                size="small"
                v-if="scope.row.dailyStatus == 0"
                style="color: #F56C6C"
                >查阅

              </el-button>
              <el-button 
                @click="handleUpdate(scope.row)"
                type="text" 
                size="small"
                v-if="scope.row.dailyStatus == 1"
                style="color: #67C23A"
                >已查阅

              </el-button>

              
            </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="examine-footer">
        <el-pagination
          :page-sizes="[5, 10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"

          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      </el-card>
  
      <el-dialog
          :title="dialogTitle"
          width="700px"
          :visible="dialogShow"
          :before-close="handleClose"
      >
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="日报ID：">
              {{ dailyInfo.taskDailyId }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日报内容：">
              {{ dailyInfo.comment }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日报状态：">
              {{ dailyInfo.dailyStatus }}
            </el-form-item>
          </el-col>
          
    
        </el-row>
      </el-form>
  
        <span slot="footer" class="dialog-footer">

          <el-button type="primary" v-show ="showButton" @click="submitForm">确定</el-button>


          <el-button @click="handleClose">退出</el-button>
        </span>
      </el-dialog>
  
  
    </div>
  </template>
  
  <script>

  import { getAllDaily,checkDaily
  } from "@/api/log";

  import dayjs from "dayjs";
  
  export default {
    name: "daily",
  
    data() {
      return {
        
        comment:"",
        dailyList: [],
        //任务对象
        daily: {},
        // 对话框是否显示
        dailyInfo: {
          taskDailyId: "",
          comment: "",
          dailyStatus: "",
        },
   

        dialogShow: false,
        // 对话框标题
        dialogTitle: "",
        //判断已审批
        showButton:false,

  
      };
    },
  
    mounted() {
      this.getTableData();
    },
  
    methods: {
      // 获取表格数据
      getTableData() {
        getAllDaily({
          
        }).then((result) => {
          this.dailyList = result;
        });
      },
      // 格式化日期
      dateFormat(date) {
        return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      },
      // 处理分配任务
      handleAdd() {
        this.dialogTitle = "添加任务";
        this.dialogShow = true;
      },
      handleQuery() {
        this.getTableData();
      },
      // 点击了重置按钮
      resetQuery() {
        // 重新设置查询参数
        this.taskName = "";
      },
      handleClose() {
        this.dialogShow = false;
      },
      handleUpdate(row) {
      this.dialogTitle = "更新状态";
      this.dailyInfo = row;
     
      this.dialogShow = true;
      if(row.dailyStatus==0)
          {
            this.showButton = true;
          }
          else this.showButton = false;
    },
    
 
      submitForm() {
         {console.log(this.dailyInfo.dailyStatus)
          checkDaily({
            taskDailyId: this.dailyInfo.taskDailyId,
          }).then((result) => {
            console.log(result);
          
          });
         
          
        }
        this.handleClose();
      },
    
      handleSizeChange(val) {
      this.size = val;
      // 重新获取数据
      this.getTableData();
    },
        // 当前页发生变化时
     handleCurrentChange(val) {
      this.curPage = val;
      // 重新获取数据
      this.getTableData();
    },
  
  
      dateFormat(date) {
        // 使用 dayjs 处理时间
        return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      },
  
  
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .examine-container {
    margin-top: 10px;
  
    .examine-header {
      margin-top: 10px;
      padding-left: 15px;
  
      .title-label {
        font-size: 14px;
        font-weight: 700;
        color: #606266;
        margin-right: 12px;
      }
    }
  
    .examine-body {
      margin: 20px 15px 30px 15px;
    }

    .examine-footer {
    padding-left: 15px;
    margin-top: 40px;
  }
  
  }
  </style>
  
  